<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 400px;
        }
        
        .seat {
            width: 400px;
        }
        
        .screen {
            margin-top: 10px;
        }
        
        .screen-case {
            width: 120px;
            height: 60px;
            margin: 0 auto;
            text-align: center;
            line-height: 60px;
            border: 1px solid #ccc;
        }
        
        .seat {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .seat-case {
            width: 80px;
            height: 40px;
            border: 1px solid #ccc;
            background-color: #f1f3f4;
            text-align: center;
            margin-bottom: 10px;
            line-height: 40px;
            font-size: 14px;
        }
        
        .choice {
            background-color: #f29766;
            color: #fff;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="seat">

        </div>


        <div class="screen">
            <div class="screen-case">
                屏幕中央
            </div>
        </div>
    </div>

    <script>
        const arr = [{
            id: 1,
            seat: '座位1号'
        }, {
            id: 2,
            seat: '座位2号'
        }, {
            id: 3,
            seat: '座位3号',
        }, {
            id: 4,
            seat: '座位4号',
        }, {
            id: 5,
            seat: '座位5号',
        }, {
            id: 6,
            seat: '座位6号',
        }, {
            id: 7,
            seat: '座位7号',
        }, {
            id: 8,
            seat: '座位8号',
        }, {
            id: 9,
            seat: '座位9号',
        }, {
            id: 10,
            seat: '座位10号',
        }, {
            id: 11,
            seat: '座位11号',
        }, {
            id: 12,
            seat: '座位12号',
        }, {
            id: 13,
            seat: '座位13号',
        }, {
            id: 14,
            seat: '座位14号',
        }, {
            id: 15,
            seat: '座位15号',
        }, {
            id: 16,
            seat: '座位16号',
        }, {
            id: 17,
            seat: '座位17号'
        }, {
            id: 18,
            seat: '座位18号'
        }, {
            id: 19,
            seat: '座位19号'
        }, {
            id: 20,
            seat: '座位20号'
        }, ]

        // 座位盒子
        let seat = document.querySelector('.seat')
            // 创建座位
        arr.forEach(el => {
                // 给座位设置是否选择
                let seat_case = document.createElement('div')
                seat_case.id = el.id
                    // 进来判断当前座位是否选中
                if (el.choice) {
                    // 已选中
                    seat_case.className = 'seat-case' + ' ' + 'choice'
                    seat_case.innerText = el.choice
                } else {
                    // 未选中
                    seat_case.className = 'seat-case'
                    seat_case.innerText = el.seat
                }
                seat_case.onclick = () => {}

                seat.appendChild(seat_case)
            })
            // 事件委托 设置点击事件
        seat.addEventListener('click', (e) => {

            // 点击的座位未选中时 让它选中
            if (e.target.className == 'seat-case') {
                e.target.className = 'seat-case' + ' ' + 'choice'

                // 获取到当前点击的座位
                let cancelElement = document.getElementById(e.target.id)
                let present = arr.find(el => {
                        return el.id == e.target.id
                    })
                    /*
                    修改数据的目的是为了下次进入的时候根据是否已选来渲染页面
                    如果此处不修改数据，那么做的只是一次性的页面效果
                    尽管当前只是一次性的页面效果，但是为了更好的页面展示效果
                    此处也应该修改数据
                    */
                    // 给数据添加选中标识
                present.choice = '座位已选'
                cancelElement.innerText = present.choice
                return
            }


            // 点击的座位选中时
            if (e.target.className == 'seat-case choice') {
                if (confirm('确定取消吗')) {
                    // 取消选中
                    e.target.className = 'seat-case'
                        // 获取到当前点击的座位
                    let cancelElement = document.getElementById(e.target.id)
                        // 拿到当前点击座位在数组中的数据
                    let present = arr.find(el => {
                            return el.id == e.target.id
                        })
                        // 删除选中的数据信息
                    delete present.choice
                        // 恢复座位描述信息 
                    cancelElement.innerText = present.seat
                    return
                }
            }

        })
    </script>
</body>

</html>